<template>
  <div class="trend-column">
    <h3>{{ titletext }}</h3>
    <div class="echartsbox">
      <div id="trendcolumn" style="width: 100%; height: 100%;"></div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: "chinaMap",
  props: {
    titletext: String,
    echartsdata:Object
  },
  components: {},
  data() {
    return {
      xdata:Object.keys(this.echartsdata),
      ydata:Object.values(this.echartsdata)
    };
  },
  watch: {},
  created() {
    console.log(this.xdata);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var option = {
        // tooltip: {
        //   trigger: "axis",
        // },
        splitLine: {
          lineStyle: {
            opacity: 0.3,
          },
        },
        grid:{
          left:'15%',
          right: 25,
          bottom: 40,
          top: 20
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#a1a1a4", //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                fontWeight:'bold'
              },
            },
            data: this.xdata,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#a1a1a4", //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                fontWeight:'bold'
              },
            },
            data:this.ydata,
          },
        ],
        series: [
          {
            name: "降水量",
            type: "bar",
            barWidth: 6, //柱图宽度
            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4DFFCA" },
                  { offset: 1, color: "#139982" },
                ]),
              },
            },
            data: this.ydata,
          },
          {
            name: "折线",
            type: "line",
            symbolSize: 7,
            /*信息显示方式*/
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                color: "#47e7b9",
                lineStyle:{
                    color:'#099394'
                }
              },
            },
            data: this.ydata,
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(document.getElementById("trendcolumn"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    update(data) {
      const xdata = Object.keys(data)
      const ydata = Object.values(data)
      var option = {
        // tooltip: {
        //   trigger: "axis",
        // },
        splitLine: {
          lineStyle: {
            opacity: 0.3,
          },
        },
        grid:{
          left:'15%',
          right: 25,
          bottom: 40,
          top: 20
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#a1a1a4", //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                fontWeight:'bold'
              },
            },
            data: xdata,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#a1a1a4", //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                fontWeight:'bold'
              },
            },
            data: ydata,
          },
        ],
        series: [
          {
            name: "降水量",
            type: "bar",
            barWidth: 6, //柱图宽度
            /*设置柱状图颜色*/
            itemStyle: {
              normal: {
                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4DFFCA" },
                  { offset: 1, color: "#139982" },
                ]),
              },
            },
            data: ydata,
          },
          {
            name: "折线",
            type: "line",
            symbolSize: 7,
            /*信息显示方式*/
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                color: "#47e7b9",
                lineStyle:{
                    color:'#099394'
                }
              },
            },
            data: ydata,
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(document.getElementById("trendcolumn"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
};
</script>
<style lang="less">
.trend-column {
  width:100%;
  height: calc(100% - 30px);
  h3 {
    font-size: 22px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 700;
    text-align: left;
  }
  .echartsbox {
    width: 100%;
    height: 100%;
  }
}
</style>
